<template>
    <div class="changePW">
        <van-nav-bar
            title="修改密码"
            left-arrow
            @click-left="backHandler"
            style="margin-bottom:4px;"
            />
        <van-form validate-first @failed="onFailed"  @submit="submitHandler">
            <van-field
                v-model.trim="oldPW"
                name="pattern"
                type="password"
                placeholder="请输入 原密码"
                :rules="[{ validator, message: '请输入6-12位密码' },{validator:verifyPW, message: verifyPWMsg}]"
            />
            <van-field
                v-model.trim="newPW"
                name="validator"
                type="password"
                placeholder="请输入 新密码"
                :rules="[{ validator, message: '请输入6-12位密码' }]"
            />
            <van-field
                v-model.trim="newPWT"
                name="asyncValidator"
                type="password"
                placeholder="请确认 新密码"
                :rules="[{ validator, message: '请输入6-12位密码' },{validator:validatorNewPW, message: '两次密码不一致'}]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">确认</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
export default {
    data(){
        return{
            oldPW: '',
            newPW: '',
            newPWT: '',
            userId: 0,
            verifyPWMsg: '原密码错误！',
            validatorPW: '/admin/user/verifyPassword',
            changeUrl: '/admin/user/edit'
        }
    },
    created(){
        this.userId = changePW.getUserId()
        if(!this.userId) this.$toast.fail('获取用户信息失败！')
    },
    methods: {
        // 校验函数返回 true 表示校验通过，false 表示不通过
        validator(val) {
            return /^\S{6,12}$/.test(val);
        },
        validatorNewPW(val){
            return val === this.newPW
        },
        onFailed(errorInfo) {
            console.log('failed', errorInfo);
        },
        backHandler(){
            android.setFinish()
        },
        verifyPW(){
            return new Promise((resolve)=>{
                this.axios({
                    method: 'get',
                    url: this.validatorPW,
                    responseType: 'json',
                    params:{
                        password: this.oldPW,
                        userId: this.userId
                    }
                }).then((res)=>{
                    if(res.data.code!=20000) {
                        this.verifyPWMsg = res.data.message
                        resolve(false)
                    }else{
                        resolve(res.data.data)
                    }
                    
                })
            })
        },
        submitHandler(){
            this.axios({
                method: 'put',
                url: this.changeUrl,
                responseType: 'json',
                data:{
                    password: this.oldPW,
                    newpassword1: this.newPWT,
                    username: changePW.getUserName(),
                }
            }).then((res)=>{
                this.$toast(res.data.message)
                if(res.data.code == 20000) return changePW.setFinish()
            })
        }
    },

}
</script>

<style>

</style>